<template>
	<view>
		<!-- <uv-loading-page loading-text="加载中..." font-size="24rpx"></uv-loading-page> -->
		<view></view>
		<z-paging class="page-background" ref="paging" v-model="dataList" use-cache cache-key="sampleList"
			cache-mode="always" loading-full-fixed :auto-hide-loading-after-first-loaded="false" use-virtual-list
			@query="queryList">
			<!-- 这是一个自定义加载动画 -->
			<view slot="loading">
				<uv-loading-icon style="margin-top: 110%;" :vertical="true" mode="semicircle"
					text="加载中..."></uv-loading-icon>
			</view>
			<view slot="top">
				<view class="uni-status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>
				<!-- <viwe :style="{ height: '50px'}></viwe> -->
				<!-- 搜索功能 -->
				<view class="uni-search-box">
					<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
						:placeholder="inputPlaceholder" />
					<view class="cover-search-bar" @click="searchClick"></view>
					<!-- 过滤选择栏 -->
					<view class="uni-padding-wrap">
						<!-- 						<uni-segmented-control :current="current" :values="items" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickItem" /> -->
						<z-tabs :list="items" @change="onClickItem" />
					</view>
				</view>
			</view>
			<view v-if="dataList" class="list" slot="cell" slot-scope="{item,index}">
				<!-- 			<view class="list-item" hover-class="item-item-hover" v-for="(item,index) in dataList" :key="index"
				@click="handleItemClick(item._id)"> -->
				<view class="item-box list-item" hover-class="item-item-hover" @click="handleItemClick(index)">
					<!-- 点赞数量显示 -->
					<view class="item-like-box" v-if=item.likes>
						<uni-icons type="hand-up-filled" color="#ffc109" size=22></uni-icons>
						<text class="item-like-count">{{item.likes}}</text>
					</view>
					<view class="item-title" style="text-overflow: ellipsis;">
						{{item.fault_description}}
					</view>
					<view>
						<text>故障代码：</text>
						<text style="color: red;">{{item.fault_code}}</text>
					</view>
					<view>
						<text>设备型号：</text>
						<text>{{item.brand}}</text>
						<text>{{'\u3000'}}</text>
						<text>{{item.model}}</text>

					</view>
					<view class="item-datatime">
						<view>
							<text>贡献者：</text>
							<text v-if="item.user_id[0]">{{item.user_id[0].nickname}}</text>
						</view>
						<uni-dateformat format="yyyy/MM/dd hh:mm" :date="item.create_time" />
					</view>
				</view>
			</view>
		</z-paging>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>

</template>

<script>
	import { uuid } from 'vue-uuid';
	// 关闭系统自带的加载动画
	const faultSample = uniCloud.importObject("star-service", {
		customUI: true // 取消自动展示的交互提示界面
	})

	export default {
		computed: {
			inputPlaceholder(e) {
				if (uni.getStorageSync('CURRENT_LANG') == "en") {
					return 'Please enter the search content'
				} else {
					return '请输入搜索内容'
				}
			}
		},
		data() {
			return {
				dataList: [],

				items: ['全部案列', '我的案列', '我的收藏'],
				tabIndex: 0,

				activeColor: '#007aff',
				current: 0,
				styleType: 'button',
				listHight: 0, //列表高度

				iStatusBarHeight: 0,

				keyword: "",

				showRefresh: false,

			}
		},

		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},

		onReady() {

		},

		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			onClickItem(index) {
				this.tabIndex = index;
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.tabIndex + 1
				}
				faultSample.getAllFaultSampleList(params).then(res => {
					//将请求的结果数组传递给z-paging
					this.$refs.paging.complete(res.data);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false);
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},

			// 获取一条记录传递到明细页面
			handleItemClick(index) {
				// 准备数据
				const SendItem = this.dataList[index]
				uni.setStorageSync('sampleItem', JSON.stringify(SendItem))

				uni.navigateTo({
					url: './detail'
					// success: function(res) {
					// 	res.eventChannel.emit('SendDataItem', SendItem)
					// }

				})
			},

			searchClick() {},

			fabClick() {
				uni.navigateTo({
					url: './edit?Action=add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.paging.reload(true)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../uni.scss";

	.uni-status-bar {
		background-color: $uni-bg-color;
		// height: 20px;
	}

	.uni-search-box {
		background-color: $uni-bg-color;
		// position: sticky;
		// height: 100px;

		/* #ifdef APP-PLUS */
		// margin-bottom: 10rpx;
		/* #endif */

		// left: 0;
		/* #ifndef APP-PLUS */
		z-index: 9;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 580rpx;
		/* #endif */
	}

	/* 过滤选择栏 */
	.uni-padding-wrap {
		background-color: $uni-bg-color;
		padding: 0rpx 20rpx 20rpx 20rpx;

	}

	.list {
		/* display: flex; */
		background-color: transparent;
		// top: 100rpx;

		// background-color: red;
		/* padding: 0rpx 0rpx; */
		/* 上下左右都留5 */
		/* border-radius: 20rpx; */
		/* flex-direction: column; */
	}

	.list-item {
		background-color: $uni-bg-color;
		border-color: $uni-bg-color;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 10px;
	}

	.item-item-hover {
		/* 按钮按下去状态颜色 */
		background-color: $uni-bg-color-hover;
		border-color: $uni-bg-color-hover;
	}

	.item-box {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;

		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.item-like-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		// align-content: flex-end;
		justify-content: end;
	}

	.item-like-count {
		margin-left: 6px;
		color: $uni-text-color-disable ;
	}

	.item-title {
		color: $uni-color-title;
		font-size: $uni-font-size-title;
		// font-weight: ;
		white-space: nowrap; //单行显示
		overflow: clip; //超出省略

	}

	.item-body {
		color: $uni-color-paragraph;
		font-size: $uni-font-size-paragraph;
	}

	.item-datatime {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		align-content: flex-end;
		justify-content: space-between; //子元素靠左对齐
		font-size: $uni-font-size-base;
		color: $uni-text-color-disable ;
	}

	.container {
		background-color: royalblue;
		/* 显示内容主题容器 和箭头的比列*/
		flex: 32;
	}

	// .item-box {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	flex-direction: row;
	// 	flex: 2;

	// 	margin: 0rpx, 10rpx, 5rpx, 10;
	// 	padding: 10rpx, 10rpx, 10rpx, 10rpx;
	// 	border-radius: 20rpx;
	// 	background-color: #FFFFFF;
	// 	/* color: #FFFFFF; */
	// 	border-color: #FFFFFF;
	// }

	// .errcode {
	// 	display: flex;
	// 	flex-direction: row;
	// }

	// .item-box-normal {

	// 	/* 按钮通常状态颜色 */
	// 	/* 背景色 */
	// 	background-color: #FFFFFF;
	// 	/* 边框色 */
	// 	border-color: #FFFFFF;
	// 	/* margin-bottom: 5rpx; */
	// }

	// .item-box-hover {
	// 	/* 按钮按下去状态颜色 */
	// 	background-color: #f1f1f1;
	// 	border-color: #f1f1f1;
	// }
</style>